<template>
    <div class="h-dropdown">
        <h-tooltip :trigger="trigger" :placement="placement" :options-placement="optionsPlacement"
            :open-delay="openDelay" :close-delay="closeDelay" :manual="manual" @visible-change="visibleChange"
            ref="tooltipRef">
            <slot></slot>
            <template #content>
                <ul class="h-dropdown__menu">
                    <template v-for="item in menuOptions" :key="item.key">
                        <li v-if="item.divided" class="divided-placeholder">

                        </li>
                        <li class="h-dropdown__item" :id="`dropdown-item-${item.key}`"
                            :class="{ 'is-disabled': item.disabled, 'is-divided': item.divided }"
                            @click="selectFun(item)">
                            <RenderVnode :vNode="item.label"></RenderVnode>
                        </li>
                    </template>
                </ul>
            </template>
        </h-tooltip>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import type { Dropdown, DropdownProps, DropdownEmits, DropdownInstance } from './types'
import type { TooltipManual } from '../Tooltip/types'
import HTooltip from '../Tooltip/HTooltip.vue';
import RenderVnode from '@/common/renderVNode';

const tooltipRef = ref() as Ref<TooltipManual>

const { hideOptions = true } = defineProps<Dropdown>()
const emits = defineEmits<DropdownEmits>()

const visibleChange = (e: boolean) => {
    emits('visibleChange', e)
}

const selectFun = (e: DropdownProps) => {
    if (e.disabled) {
        return
    }
    emits('select', e)
    if (hideOptions) {
        tooltipRef.value?.hide()
    }
}

defineExpose<DropdownInstance>({
    show: () => tooltipRef.value?.show(),
    hide: () => tooltipRef.value?.hide()
})

</script>

<style scoped></style>